<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索引擎</title>
</head>
<body>
    <input type="text" id="inputID">
    <ul id="ulID">
        <li></li>
    </ul>
</body>
<script>
    function fn(o){
        let _ul = document.querySelector("#ulID");
        console.log(o);
        let data = o.g || [];
        console.log(data);
        
        let list = data.map(ele=>`<li>${ele.q}</li>`).join("");
        _ul.innerHTML = list;
    }
</script>

<script>
    window.onload = () =>{
        //1.获取标签
        let _input = document.querySelector("#inputID");
       
        // let _script = document.querySelector("#scriptID");
        //2.监听事件
        _input.oninput = function (){
            let val = this.value;
            //3.jsonp发送请求
        //    _script.setAttribute("src","https://www.baidu.com/sugrec?callback=fn&prod=pc_hao123&wd=" + val);
            let oscript = document.querySelector("#scriptID");
            if(oscript){
                document.body.removeChild(oscript);
            }
            oscript = document.createElement("script");
            oscript.id = "scriptID";
        oscript.setAttribute("src","https://www.baidu.com/sugrec?callback=fn&prod=pc_hao123&wd=" + val) ;
        document.body.appendChild(oscript);
     }
    }


</script>
<!-- <script id="scriptID"></script> -->
</html>